<template>
  <div>
    <!-- //开通导入列表 -->
    <div v-if="isShow">
      <a-table
        :columns="columnstableKAITONG"
        :data-source="dataKAITONG"
        bordered
        size="middle"
        rowKey="id"
        style="margin: 20px 10% 0 10%"
        :pagination="false"
      >
        <template slot="file" slot-scope="text, record">
          <SelectFile
            :includeFileName="record.desc"
            :id="record.id"
            @fileListChange="fileListChange"
            @resultChange="resultChange"
          ></SelectFile>
        </template>
        <template slot="action" slot-scope="text, record">
          <UpoadFile
            @resultChange="resultChange"
            :uploadIsOk="record.uploadIsOk"
            :id="record.id"
            :url="record.url"
            :fileList="record.fileList"
            :btninfo="record"
            @btnChange="btnChange"
          ></UpoadFile>
        </template>

        <template slot="results" slot-scope="text, record">
          <a @click="seeResults(record)">查看结果</a>
        </template>

        <template slot="template" slot-scope="text, record">
          <a :href="record.downurl" :download="record.downurl">点击下载</a>
        </template>
      </a-table>
      <UploadFileAll
        style="margin: 20px 10% 0 10%;float:right"
        @resultChange="resultChange"
        @btnloading="btnloading"
        :info="dataKAITONG"
      ></UploadFileAll>
      <a-button type="primary" style="width: 10%; margin: 20px 45%" @click="seeReport">查看总报表</a-button>
      <div style="height: 1000px"></div>
    </div>
    <!-- //开通查看周报 -->
    <div style="margin: 5px 10px" v-else>
      <a-button
        style="margin-bottom:15px"
        v-if="tableInfo == 1"
        shape="round"
        type="primary"
        @click="comeBack"
      >返回</a-button
      >
      <br />
      <a-range-picker
        @change="onChangePicker"
        :default-value="[moment(startTime, dateFormat), moment(endTime, dateFormat)]"
        :format="dateFormat"
      />
      <a-button type="primary" icon="search" style="margin: 0px 0 10px 10px" @click="searchFirst">查询</a-button>
      <a-button type="primary" icon="export" style="margin: 0px 0 10px 10px" @click="downloadQH">excel导出</a-button>
      <a-table
        :loading="firstLoading"
        :columns="columnstableFirst"
        :data-source="dataFirst"
        bordered
        size="middle"
        style="width: 100%"
        :pagination="false"
      >
        <template slot="ckNum" slot-scope="text, record">
          <a @click="startTotalEvent(record, 2)">{{ text }}</a>
        </template>
        <template slot="allNum" slot-scope="text, record">
          <a @click="startTotalEvent(record, '')">{{ text }}</a>
        </template>
        <template slot="kjNum" slot-scope="text, record">
          <a @click="startTotalEvent(record, 3)">{{ text }}</a>
        </template>
        <template slot="kkNum" slot-scope="text, record">
          <a @click="startTotalEvent(record, 1)">{{ text }}</a>
        </template>
      </a-table>
    </div>

    <!-- 工单列表 -->
    <WorkOrderList v-if="showPage" :queryParam="queryParam" @cancelEvent="cancelEvent"></WorkOrderList>

    <!-- 处理结果 -->
    <a-modal :visible="resultShow" :footer="null" :width="800" @cancel="cancelModel">
      <a-table
        :columns="resultColumns"
        :data-source="resultData"
        bordered
        size="middle"
        rowKey="id"
        :pagination="false"
        style="margin-top:20px"

      >
        <template slot="status" slot-scope="text, record">
          <span v-if="text==0">失败</span>
          <span v-if="text==1">处理中</span>
          <span v-if="text==2">成功</span>
        </template>

      </a-table>
    </a-modal>

  </div>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import { getFXZB, exportExcelQH, importLogPages } from '@/api/public'
import { getNowTime } from '@/utils/util.js'
import Vue from 'vue'
import FaultData from '@/views/systemManage/faultData'
import BusinessRoadData from '@/views/systemManage/businessRoadData' // 企宽数据
import AccountManageData from '@/views/systemManage/accountManageData'
import SurveyData from '@/views/systemManage/surveyData'
import UrgeData from '@/views/systemManage/urgeData'
import SelectFile from '@/views/systemManage/uploadFile/selectFile'
import UpoadFile from '@/views/systemManage/uploadFile/upoadFile'
import UploadFileAll from '@/views/systemManage/uploadFile/uploadFileAll'
import WorkOrderList from '@/views/analysisManage/opening/workOrderList/workOrderList'
export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    FaultData,
    UrgeData,
    BusinessRoadData,
    AccountManageData,
    SurveyData,
    SelectFile,
    UpoadFile,
    UploadFileAll,
    WorkOrderList
  },
  props: ['tableInfo'],
  data () {
    this.columns = columns
    return {
      resultShow: false,
      showPage: false,
      resultData: [],
      info: [],
      fileList: [],
      pagination: false,
      qingdanlist: [],
      firstLoading: false,
      startTime: '',
      endTime: '',
      dateFormat: 'YYYY-MM-DD',
      linshiId: '', // 记录修改得某行清单id
      isShow: true,
      readDetailInfo: false, // 二级页面（一级详情）
      daochuIs: false,
      headers: {
        authorization: Vue.ls.get('ACCESS_TOKEN')
      },
      columnstableKAITONG, // KT
      columnstableFirst,
      data,
      dataFirst: [],
      dataKAITONG: [],
      visible: false,
      queryParam: {},
      // 处理结果模板
      resultColumns: [
        {
          title: '序号',
          dataIndex: 'id'
        },
        {
          title: '名称',
          dataIndex: 'name'
        },
        {
          title: '文件数量',
          dataIndex: 'num'
        },
        {
          title: '文件上传时间',
          dataIndex: 'createDate'
        },
        {
          title: '处理结果',
          dataIndex: 'reason'
        },
        {
          title: '处理状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        }

      ]
    }
  },
  created () {
    const arr = getNowTime()
    this.startTime = arr[0] + ' 00:00:00'
    this.endTime = arr[1] + ' 23:59:59'
    this.initdataKAITONG()
  },
  computed: {},
  mounted () {
    if (this.tableInfo === 2) {
      this.isShow = false
      this.getFirstData()
    }
  },
  methods: {
    moment,
    async seeResults (e) {
      const info = {}
      info.name = e.uploadName
      info.current = 1
      info.pageSize = 20
      info.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
      info.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
      const { data } = await importLogPages(info)
      this.resultData = data.records
      this.resultShow = true
    },
    // 上传结果按钮状态改变
    btnloading (id) {
      this.dataKAITONG[id].loading = true
    },
    // 按钮状态改变
    btnChange (id) {
      this.dataKAITONG[id].loading = true
    },
    // 查询
    searchFirst () {
      this.getFirstData()
    },
    // 表格弹窗取消
    cancelEvent () {
      this.showPage = false
    },
    /// /获取开通
    getFirstData () {
      this.firstLoading = true
      getFXZB(this.startTime, this.endTime)
        .then(response => {
          this.dataFirst = response.data
          this.dataFirst.forEach((item, index) => {
            this.dataFirst[index].id = index
          })
          this.firstLoading = false
        })
    },
    // export导出
    downloadQH () {
      exportExcelQH(this.startTime, this.endTime)
        .then(response => {
          const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          const url = window.URL.createObjectURL(blob)
          const aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '开通数据.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
    },

    // 时间选择
    onChangePicker (date, dateString) {
      this.startTime = dateString[0] + ' 00:00:00'
      this.endTime = dateString[1] + ' 23:59:59'
    },

    removed (recode) {
      this.dataKAITONG.splice(
        this.dataKAITONG.findIndex(item => item.id === recode.id),
        1
      )
    },
    startTotalEvent (e, type) {
      this.queryParam.country = e.country
      this.queryParam.type = type
      this.queryParam.startTime = this.startTime
      this.queryParam.endTime = this.endTime
      this.showPage = true
    },
    // 查看报表
    seeReport () {
      this.isShow = false
      const arr = getNowTime()
      this.startTime = arr[0] + ' 00:00:00'
      this.endTime = arr[1] + ' 23:59:59'
      this.getFirstData()
    },
    // 上传文件
    fileListChange (fileList, result, id) {
      result === '文件名称错误' ? (this.dataKAITONG[id].uploadIsOk = true) : (this.dataKAITONG[id].uploadIsOk = false)
      this.dataKAITONG[id].fileList = fileList
      this.dataKAITONG[id].status = result
    },
    // 删除结果改变
    resultChange (data, id) {
      this.dataKAITONG[id].status = data
      this.dataKAITONG[id].fileList = []
      this.dataKAITONG[id].uploadIsOk = true
      this.dataKAITONG[id].loading = false
    },
    // 初始化清单列表数据
    initdataKAITONG () {
      this.dataKAITONG = [
        {
          id: 0,
          name: '综资查勘清单',
          url: '/api/import/manage/opening_ck',
          fileList: [],
          status: '未上传',
          desc: '专线查勘',
          rule: 'xx专线查勘xx.xlsx',
          uploadIsOk: false,
          loading: false,
          uploadName: 'opening_ck',
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 1,
          name: '施调竣工清单',
          url: '/api/import/manage/opening_st',
          fileList: [],
          status: '未上传',
          desc: 'pon专线',
          rule: 'xxpon专线xx.xlsx',
          uploadName: 'opening_st',
          uploadIsOk: false,
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        },
        {
          id: 2,
          name: '综资开通清单',
          url: '/api/import/manage/opening_kt',
          fileList: [],
          status: '未上传',
          desc: '专线开通',
          rule: 'xx专线开通xx.xlsx',
          uploadName: 'opening_kt',
          uploadIsOk: false,
          loading: false,
          downurl: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/%E8%B4%A6%E6%88%B7%E6%A8%A1%E6%9D%BF.xlsx'
        }
      ]
    },
    readDetail () {
      this.readDetailInfo = true
    },
    callback () {},
    handleCancelExport () {
      this.daochuIs = false
      this.readDetailInfo = false
    },
    comeBack () {
      this.isShow = true
      this.initdataKAITONG()
    },
    daocru () {
      this.isShow = false
    },
    handleAdd () {
      this.mdl = null
      this.visible = true
    },
    handleEdit (record) {
      this.visible = true
      this.mdl = { ...record }
    },
    cancelModel () {
      this.resultShow = false
    }
  }
}

const columnstableKAITONG = [
  {
    title: '报表类型',
    dataIndex: 'name',
    key: 'name',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '命名规则',
    dataIndex: 'rule',
    key: 'rule',
    width: 50,
    align: 'center'
  },
  {
    title: '上传操作',
    dataIndex: 'file',
    key: 'file',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'file' }
  },
  {
    title: '上传结果',
    dataIndex: 'status',
    key: 'status',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '处理结果',
    dataIndex: 'results',
    key: 'results',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'results' }
  },
  {
    title: '模板下载',
    dataIndex: 'template',
    key: 'template',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'template' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 50,
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
const columnstableFirst = [
  {
    title: 'KPI专线开通竣工日报', // （6.26-7.1）
    children: [
      {
        title: '区县',
        dataIndex: 'country',
        key: 'area',
        width: 50,
        align: 'center'
      },
      {
        title: '查勘总量',
        dataIndex: 'ckNum',
        scopedSlots: { customRender: 'ckNum' },
        key: 'ckNum',
        width: 80,
        align: 'center'
      },
      {
        title: '查勘平均时长',
        dataIndex: 'ckLong',
        key: 'ckLong',
        width: 80,
        align: 'center'
      },
      {
        title: '3日查勘及时率',
        dataIndex: 'ckRate',
        key: 'ckRate',
        width: 80,
        align: 'center'
      },
      {
        title: '合同签订平均时长',
        dataIndex: 'htLong',
        key: 'htLong',
        width: 80,
        align: 'center'
      },
      {
        title: '合同签订及时率',
        dataIndex: 'htRate',
        key: 'htRate',
        width: 80,
        align: 'center'
      },
      {
        title: '竣工总量',
        dataIndex: 'allNum',
        key: 'allNum',
        scopedSlots: { customRender: 'allNum' },
        width: 80,
        align: 'center'
      },

      {
        title: '建设总量',
        dataIndex: 'kjNum',
        key: 'kjNum',
        scopedSlots: { customRender: 'kjNum' },
        width: 80,
        align: 'center'
      },
      {
        title: '快开总量',
        dataIndex: 'kkNum',
        key: 'kkNum',
        scopedSlots: { customRender: 'kkNum' },
        width: 80,
        align: 'center'
      },

      {
        title: '快建平均时长',
        dataIndex: 'kjLong',
        key: 'kjLong',
        width: 80,
        align: 'center'
      },

      {
        title: '快开平均时长',
        dataIndex: 'kkLong',
        key: 'kkLong',
        width: 100,
        align: 'center'
      },

      {
        title: '开通及时率(5日快建+1日快开)',
        dataIndex: 'ktRate',
        key: 'ktRate',
        width: 100,
        align: 'center'
      },
      {
        title: '全程平均时长',
        dataIndex: 'allLong',
        key: 'allLong',
        width: 80,
        align: 'center'
      },
      {
        title: '查勘平均时长(已归档开通单)',
        dataIndex: 'ckOneLong',
        key: 'ckOneLong',
        width: 80,
        align: 'center'
      },
      {
        title: '全流程及时率',
        dataIndex: 'allRate',
        key: 'allRate',
        width: 100,
        align: 'center'
      }
    ]
  }
]
const data = []
const columns = []
</script>
